<template>
  <div class="app-container" style="margin-top:15px" >
    <!-- &lt;!&ndash;表单&ndash;&gt; -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="statisticObj.type" clearable placeholder="请选择">
          <el-option label="每日用户登录数统计" value="login_num" />
          <el-option label="每日用户注册数统计" value="register_num" />
          <el-option label="每日视频举报数统计" value="report_video" />
          <el-option label="每日视频发布数统计" value="video_num" />
          <el-option label="每日用户举报数统计" value="report_user" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="statisticObj.begin"
          type="date"
          placeholder="选择开始日期"
          @change="startTime"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="statisticObj.end"
          type="date"
          @change="endTime"
          placeholder="选择截止日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-button
        :disabled="btnDisabled"
        type="primary"
        icon="el-icon-search"
        @click="showChart()"
        >查询</el-button
      >
    </el-form>
    <div class="chart-container">
      <div id="chart" class="chart" style="height: 500px; width: 100%" />
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import statisticsApi from "@/api/statistics";

export default {
  data() {
    return {
      statisticObj: {
        type: "",
        begin:new Date(),
        end: new Date(),
      },
      btnDisabled: false,
      chart: null,
      title: "",
      xData: [],
      yData: [],
    };
  },
  methods: {
    //设置时间不能超过现在
    startTime(data) {
      let now = new Date();
      let number = (now.getTime() + 8 * 60 * 60 * 1000) % (1000 * 60 * 60 * 24);
      this.statisticObj.begin =
        new Date(data).getTime() - now.getTime() > 0
          ? new Date(now.getTime() - number)
          : data;
    },
    endTime(data) {
      let now = new Date();
      let number = (now.getTime() + 8 * 60 * 60 * 1000) % (1000 * 60 * 60 * 24);
      this.statisticObj.end =
        new Date(data).getTime() - now.getTime() > 0
          ? new Date(now.getTime() - number)
          : data;
    },

    showChart() {
      if (this.statisticObj.type=="") {
        this.$message({
          type:"warning",
          message:"请选择相应的统计类型进行查询哦"
        })
        return;
      }
      statisticsApi.getChartData(this.statisticObj).then((response) => {
        //日期
        this.xData = response.data.dateList;
        //数值
        this.yData = response.data.dataList;
        this.setChartData();
      });
    },
    // 准备图表数据
    setChartData() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById("chart"));
      // console.log(this.chart)
      // 指定图表的配置项和数据
      var option = {
        // x轴是类目轴（离散数据）,必须通过data设置类目数据
        xAxis: {
          type: "category",
          name: "时间日期",
          data: this.xData,
        },
        // y轴是数据轴（连续数据）
        yAxis: {
          type: "value",
          name: "数量",
        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [
          // {
          //   // 系列中的数据内容数组
          //   data: this.yData,
          //   // 折线图
          //   type: "line",
          //   smooth: true,
          //   // areaStyle:{}
          // },
          {
            data: this.yData,
            type: "bar",
          },
        ],
        //显示标题
        title: {
          // text: "数据统计",
          text:
            this.statisticObj.type == "login_num"
              ? "每日用户登录数统计"
              : this.statisticObj.type == "register_num"
              ? "每日用户注册数统计"
              : this.statisticObj.type == "report_video"
              ? "每日视频举报数统计"
              : this.statisticObj.type == "video_num"
              ? "每日视频发布数统计"
              : "每日用户举报数统计",
          left: "center",
        },
        //x坐标轴触发提示
        tooltip: {
          trigger: "axis",
        },
        toolbox: {
          feature: {
            saveAsImage: {},
            magicType: {
              type: ["line", "bar", "stack"],
            },
            restore: {},
          },
        },
        // 区域缩放
        dataZoom: [
          {},
          {
            type: "inside",
          },
        ],
        
      };
      this.chart.setOption(option);
    },
  },
};
</script>
